<template>
    <el-main>
    <div style=" width:100%;height: 100%;">
        <div style="display:flex;">
            <span style="color:white;">单位名称:</span>
            <el-input v-model="input1" placeholder="请输入单位名称" clearable size="mini" style="height:40px;width: 200px;border-radivs:50px;"></el-input>
            <span style="color:white;">登录账号:</span>
            <el-input v-model="input2" placeholder="登录账号" clearable size="mini" style="height:40px;width: 200px;border-radivs:50px"></el-input>
            <el-button type="primary" icon="el-icon-search" style="position:absolute;top:80px;left:650px"size="mini">搜索</el-button>
            <el-button type="primary" icon="el-icon-delete" style="position:absolute;top:80px;left:750px"size="mini">清空</el-button>
        </div>
        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus" style="margin-top: 20px">新增</el-button>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="单位名称">
                    <el-input v-model="formInline.name" placeholder="请输入 单位名称"></el-input>
                </el-form-item>
                <el-form-item label="登录密码">
                    <el-input v-model="formInline.user" placeholder="请输入 登录密码"></el-input>
                </el-form-item>
                <el-form-item label="登录帐号">
                    <el-input v-model="formInline.login" placeholder="请输入 登录帐号"></el-input>
                </el-form-item>
                <el-form-item label="上级单位">

                    <span class="demonstration"></span>
                    <el-cascader
                            placeholder="请搜索 所属单位"
                            :props="{ checkStrictly: true }"
                            :options="options"
                            clearable
                            filterable></el-cascader>
                </el-form-item>
                <el-form-item label="单位属性">
                    <el-select v-model="formInline.region" placeholder="请选择 单位属性">
                        <el-option label="渠道公司" value="shanghai"></el-option>
                        <el-option label="工程商" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.region" placeholder="请选择 状态">
                        <el-option label="有效" value="shanghai"></el-option>
                        <el-option label="锁定" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地理位置">
                    <el-input v-model="formInline.user" placeholder="请输入 地理位置"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
        <div class="mmm">
        <el-button type="primary" icon="el-icon-download" @click="open()" circle style="top:130px;left:1200px"></el-button>
        <el-button type="success" icon="el-icon-refresh" circle style="top:130px;left:1250px"></el-button>
        <el-button type="info" icon="el-icon-s-operation" circle style="top:130px;left:1300px"></el-button>
        <el-button type="warning" icon="el-icon-search" circle style="top:130px;left:1350px"></el-button>
        </div>
        <el-table
                :data="tableData"
                style="top:20px;width: 100%;background-color: #242E66;color:white"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren',}">
            <el-table-column
                    prop="name"
                    label="单位名称"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="class"
                    label="级别"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="login"
                    label="登录账号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="nature"
                    label="单位属性"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="下级数量"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="创建日期"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态"
                    width="150">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    </el-main>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                input1: '',
                input2: '',
                tableData: [{
                    id: 1,
                    name: '智慧消防远程监管平台',
                    class: '1',
                    login : 'rm001',
                    nature : '渠道公司',
                    count : '2',
                    date : '2022年05月11日',
                    state : '有效',
                    children: [{
                        id: 11,
                        name: '朔州市消防大队',
                        class: '2',
                        login : 'szxfdd',
                        nature : '渠道公司',
                        count : '2',
                        date : '2022年05月18日',
                        state : '有效',
                        children: [{
                            id: 111,
                            name: '圣厚源大酒店',
                            class: '3',
                            login : 'shenghouyuan',
                            nature : '渠道公司',
                            count : '1',
                            date : '2022年05月18日',
                            state : '有效',
                            children: [{
                                id: 1111,
                                name: '圣厚源办公室',
                                class: '4',
                                login: '圣厚源办公室',
                                nature: '渠道公司',
                                count: '0',
                                date: '2022年06月13日',
                                state: '有效',
                            }]
                        }, {
                            id: 112,
                            name: '瑞铭网络通信工程有限公司',
                            class: '3',
                            login : 'ruiming',
                            nature : '渠道公司',
                            count : '0',
                            date : '2022年05月18日',
                            state : '有效',
                        }]
                    }, {
                        id: 12,
                        name: '瑞铭通信工程有限公司',
                        class: '2',
                        login : 'ruiming002',
                        nature : '工程商',
                        count : '4',
                        date : '2022年05月13日',
                        state : '有效',
                        children: [{
                            id: 121,
                            name: '朔州经济开发区管理委员会',
                            class: '3',
                            login: 'kfqgwh',
                            nature: '渠道公司',
                            count: '2',
                            date: '2023年12月16日',
                            state: '有效',
                            children: [{
                                id: 1211,
                                name: '开发区环境局',
                                class: '4',
                                login: 'kfqhjj',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年12月16日',
                                state: '有效',
                            },{
                                id: 1212,
                                name: '开发区建设局',
                                class: '4',
                                login: 'kfqjsj',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年12月16日',
                                state: '有效',
                            }]
                        },{
                            id: 122,
                            name: '朔州市邮政储蓄银行',
                            class: '3',
                            login: 'SZSYZCXYH',
                            nature: '渠道公司',
                            count: '15',
                            date: '2023年01月04日',
                            state: '有效',
                            children: [{
                                id: 1221,
                                name: '右玉县支行',
                                class: '4',
                                login: 'YCYH015',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1222,
                                name: '山阴县同太南路支行',
                                class: '4',
                                login: 'YCYH014',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1223,
                                name: '山阴县支行',
                                class: '4',
                                login: 'YCYH013',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1224,
                                name: '怀仁迎宾街支行',
                                class: '4',
                                login: 'YCYH012',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1225,
                                name: '怀仁市支行',
                                class: '4',
                                login: 'YCYH011',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1226,
                                name: '平鲁区支行',
                                class: '4',
                                login: 'YCYH010',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1227,
                                name: '应县支行',
                                class: '4',
                                login: 'YCYH009',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1228,
                                name: '应县新世纪广场支行',
                                class: '4',
                                login: 'YCYH008',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 1229,
                                name: '鄯阳街支行',
                                class: '4',
                                login: 'YCYH007',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 12210,
                                name: '马邑南路支行',
                                class: '4',
                                login: 'YCYH006',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 12211,
                                name: '开发区支行',
                                class: '4',
                                login: 'YCYH005',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 12212,
                                name: '振华支行',
                                class: '4',
                                login: 'YCYH004',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月05日',
                                state: '有效',
                            },{
                                id: 12213,
                                name: '古北街支行',
                                class: '4',
                                login: 'YCYH003',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月04日',
                                state: '有效',
                            },{
                                id: 12214,
                                name: '祥泰支行',
                                class: '4',
                                login: 'YCYH002',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月04日',
                                state: '有效',
                            }, {
                                id: 12215,
                                name: '市分行营业部',
                                class: '4',
                                login: 'YCYH001',
                                nature: '渠道公司',
                                count: '0',
                                date: '2023年01月04日',
                                state: '有效',
                            }]
                            },{
                            id: 123,
                            name: '开发南路',
                            class: '3',
                            login: 'kfnl',
                            nature: '工程商',
                            count: '1',
                            date: '2022年09月28日',
                            state: '有效',
                            children: [{
                                id: 1231,
                                name: '朔城区第三中学',
                                class: '4',
                                login: 'scqdszx',
                                nature: '工程商',
                                count: '0',
                                date: '2022年09月28日',
                                state: '有效',
                            }]
                        },{
                            id: 124,
                            name: '文远路街道',
                            class: '3',
                            login: 'wyljd',
                            nature: '渠道公司',
                            count: '3',
                            date: '2022年07月26日',
                            state: '有效',
                            children: [{
                                id: 1241,
                                name: '朔州今乔智慧公寓',
                                class: '4',
                                login: 'szjqzhgy',
                                nature: '渠道公司',
                                count: '0',
                                date: '2022年09月01日',
                                state: '有效',
                            },{
                                id: 1242,
                                name: '朔州浩天宾馆',
                                class: '4',
                                login: 'szhtbg',
                                nature: '渠道公司',
                                count: '0',
                                date: '2022年09月01日',
                                state: '有效',
                            },{
                                id: 1243,
                                name: '幸福家纺',
                                class: '4',
                                login: 'xfjf',
                                nature: '渠道公司',
                                count: '0',
                                date: '2022年07月26日',
                                state: '有效',
                            }]
                        }]
                    }]
                }],
                tableData1: [{
                    id: 1,
                    name: '智慧消防远程监管平台',
                    class: '1',
                    login : 'rm001',
                    nature : '渠道公司',
                    count : '2',
                    date : '2022年05月11日',
                    state : '有效',
                    hasChildren: true
                }],
                dialogVisible: false,
                formInline: {
                    user: '',
                    region: ''
                },
                options: [
                    {value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
                        children: [{value: '朔州市消防大队', label: '朔州市消防大队',
                            children: [{value: '圣厚源大酒店', label: '圣厚源大酒店',
                                children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]},
                                {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]},
                            {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
                                children: [{value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                                    children: [{value: '开发区环境局', label: '开发区环境局'},{value: '开发区建设局', label: '开发区建设局'}]},
                                    {value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                                        children: [{value: '右玉县支行', label: '右玉县支行'},{value: '山阴县支行', label: '山阴县支行'}]},
                                    {value: '开发南路', label: '开发南路',
                                        children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]},
                                    {value: '文远路街道', label: '文远路街道',
                                        children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'},{value: '幸福家纺', label: '幸福家纺'}]}]}]}
                ],
            }
        },
        methods: {
            open() {
                this.$confirm('此操作将下载该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '下载成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下载'
                    });
                });
            },
            handleClick(row) {
                console.log(row);
            },
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 11,
                            name: '智慧消防远程监管平台',
                            class: '1',
                            login : 'rm001',
                            nature : '渠道公司',
                            count : '2',
                            date : '2022年05月11日',
                            state : '有效',
                        }, {
                            id: 12,
                            name: '智慧消防远程监管平台',
                            class: '1',
                            login : 'rm001',
                            nature : '渠道公司',
                            count : '2',
                            date : '2022年05月11日',
                            state : '有效',
                        }
                    ])
                }, 1000)
            }
        },
    }
</script>

<style scoped>
    .mmm{
        margin-top: -50px;
        display:flex;
        justify-content: end ;
    }
    .el-main {
        background-color:#242E66;
    }
    ::v-deep.el-table th.el-table__cell.is-leaf {
        background-color: #3F51B5;
        border: none !important;
    }

    ::v-deep.el-table td.el-table__cell{
        background-color: #242E66;
        border: none !important;
    }
    ::v-deep.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        background-color: #242E66!important;
    }
    ::v-deep.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        background-color: #242E66!important;
    }
</style>